<template>
	<view>
	
		<!-- <cu-custom :isBack="true" class="fixed" >
			<text slot="content">商品详情</text>
		</cu-custom> -->

		<!-- 轮播图 -->
		<swiper class="goods-swiper square-dot" :indicator-dots="true" :circular="true" indicator-active-color="#376BB4"
		 :autoplay="true" interval="4000" duration="500">
			<swiper-item v-for="(item,index) in swiperList" :key="index">
				<image :src="item.photo" mode="aspectFill" ></image>
			</swiper-item>
		</swiper>
	
		<view class="xc-bg-white xc-padding">
			<view class="xc-text-18 xc-margin-b-1">{{goods.title}}</view>
			<view class="xc-text-14 xc-c-999 xc-margin-b-10">{{goods.intro}}</view>
			<view class="xc-flex xc-flex-col-center">
			<view class="xc-text-20 xc-c-red">
				<text class="xc-text-14">￥</text>{{goods.mall_price}}
				
			</view>
			<view class="xc-text-del xc-margin-l xc-c-999">原价：￥123</view>
			</view>
			
		</view>
		<view class="xc-bg-white xc-padding xc-text-12 xc-c-999 xc-border-t xc-flex xc-flex-row-between align-center">
			<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>正品保证</view>
			<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>极速发货</view>
			<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>7天退换货</view>
		</view>
	
	<view class="xc-bg-white  xc-margin-t">
		<view class="cu-list menu sm-border">
			<!-- <view class="cu-item arrow">
				<view class="content">
					<text>优惠券</text>
				</view>
			</view> -->
		
			<view class="cu-item arrow" @tap="winBottom=true">
				<view class="content">
					<text >选择规格</text>
				</view>
			</view>
		</view>
	
	</view>
	
	
	<view class="xc-title-bar xc-margin-t">
		<view class="title">商品详情</view>
	</view>
	<view class="xc-padding xc-bg-white xc-c-666">
		<rich-text :nodes="goods.details"></rich-text>
	</view>
		
		
	<!-- 猜你喜欢 -->
	<view class="padding text-center text-lg"><text class="ico-title-arr margin-right"></text> 猜你喜欢 <text class="ico-title-arr margin-left"></text></view>
	<view class="cu-list grid col-2 bg-white" >
		<view class="cu-item radius" @tap="navTo('/pages/mall/detail?id=' + item.goods_id)" style="padding:5px;" v-for="(item,index) in guesslike" :key="index">
			<view class="cu-avatar xl" :style="'background-image:url(/static/images/ad-00'+(item+1)+'.jpg); margin:0 auto; width: 100%; height: 375rpx;'"></view>
			<view class="text-cut margin-top-xs">{{item.title}}</view>
			<view class="text-cut margin-tb-xs text-red">￥{{item.mall_price/100}}</view>
			
		</view>
	</view>
	
	
	<!-- 购买 -->
	<view class="cu-bar bg-white tabbar xc-bottom-bar">
		<button class="action" open-type="contact">
			<view class="cuIcon-service text-gray">
			
			</view>
			客服
		</button>
		<view class="action" @tap="navTo('../cart/cart')">
			<view class="cuIcon-cart">
				<view class="cu-tag badge">9</view>
			</view>
			购物车
		</view>
		<view class="bg-green submit text-white" @tap="addToCart">加入购物车</view>
		<view class="xc-bg-green text-white submit" @tap="buy">立即订购</view>
	</view>
	
	<!-- 底部弹窗 -->
	<view class="xc-mask" :style="winBottom?'display:block':'display:none'" @tap="hideWin" @touchmove.stop.prevent="moveHandle" ></view>
	<view class="xc-window-bottom"  :class="winBottom?'active':''" >
		<view class="xc-padding">
			<view class="xc-flex">
				<view class="spec-img">
					<image :src="goods_img"></image>
				</view>
				<view class="xc-flex-1 xc-margin-l">
					当前已选：
				</view>
			</view>
			
			<view class="xc-margin-t-20" v-for="(item,key,index) in filter_spec" :key="index" >
				<view class="xc-margin-b xc-text-bold xc-c-666 xc-text-16">{{key}}</view>
				<view class="xc-flex xc-flex-wrap" >
					<button class="cu-btn xc-margin-r-10 xc-margin-b-5" :class="buy_item.spec_key[key]== subitem.item_id ?'bg-blue':'line-gray'" v-for="(subitem,subindex) in item" :key="subindex" @tap="doSpec(subitem,item, key)" >{{subitem.item}}</button>
				</view>
				
			</view>
			<view class="xc-margin-t-20 xc-flex xc-flex-row-between"  >
				<view class="xc-margin-b xc-text-bold xc-c-666 xc-text-16">数量</view>
				<view class="xc-flex xc-w-160 xc-flex-col-center" >
					<button class="cu-btn" @tap="jian" :disabled="buy_item.num == 1?true:false">-</button>
					<input class="xc-text-c xc-text-20"  v-model="buy_item.num" />
					<button class="cu-btn" @tap="jia">+</button>
					
				</view>
			</view>
			<view  class="flex flex-direction xc-margin-t-40">
				<button class="bg-green cu-btn lg" @tap="ok">确 定</button>
			</view>
		</view>
	</view>
	
	<view style="height: 2000px;"> </view>
		
	</view>
</template>

<script>
	// import config from "../../config.js"
	// import util from "../../common/util.js"
	// import GOODS from "../../api/goods.js"
	import {
		mapState,
		mapMutations
	} from 'vuex'
	// {
	// 	"path": "pages/mall/detail",
	// 	"style": {
	// 		"app-plus": {
	// 			"titleNView": {
	// 				"type": "transparent",
	// 				"backgroundColor": "#8AC53F"
	// 			}
	// 		}
	// 	}
	// }, 
	export default {
		data() {
			return {
				
				//轮播图
				swiperList:[],
				// 猜你喜欢
				guesslike:[],
				//商品
				goods:{},
				//选中图片
				goods_img:"../../static/images/470x470.jpg",
				//提交产品
				buy_item:{
					shop_id:0,
					spec_key:{},
					goods_id:0,
					num:1
				},
				//操作类型
				buy_act: 1, //1，立即购买，2加入购物车
				//规格
				filter_spec:{},
				//底部弹窗
				winBottom: false,
				templateAll:`
				<template>
					<view>
					
						<!-- <cu-custom :isBack="true" class="fixed" >
							<text slot="content">商品详情</text>
						</cu-custom> -->
				
						<!-- 轮播图 -->
						<swiper class="goods-swiper square-dot" :indicator-dots="true" :circular="true" indicator-active-color="#376BB4"
						 :autoplay="true" interval="4000" duration="500">
							<swiper-item v-for="(item,index) in swiperList" :key="index">
								<image :src="item.photo" mode="aspectFill" ></image>
							</swiper-item>
						</swiper>
					
						<view class="xc-bg-white xc-padding">
							<view class="xc-text-18 xc-margin-b-1">{{goods.title}}</view>
							<view class="xc-text-14 xc-c-999 xc-margin-b-10">{{goods.intro}}</view>
							<view class="xc-flex xc-flex-col-center">
							<view class="xc-text-20 xc-c-red">
								<text class="xc-text-14">￥</text>{{goods.mall_price}}
								
							</view>
							<view class="xc-text-del xc-margin-l xc-c-999">原价：￥123</view>
							</view>
							
						</view>
						<view class="xc-bg-white xc-padding xc-text-12 xc-c-999 xc-border-t xc-flex xc-flex-row-between align-center">
							<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>正品保证</view>
							<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>极速发货</view>
							<view><text class="cuIcon-roundcheck xc-text-16 text-green"></text>7天退换货</view>
						</view>
					
					<view class="xc-bg-white  xc-margin-t">
						<view class="cu-list menu sm-border">
							<!-- <view class="cu-item arrow">
								<view class="content">
									<text>优惠券</text>
								</view>
							</view> -->
						
							<view class="cu-item arrow" @tap="winBottom=true">
								<view class="content">
									<text >选择规格</text>
								</view>
							</view>
						</view>
					
					</view>
					
					
					<view class="xc-title-bar xc-margin-t">
						<view class="title">商品详情</view>
					</view>
					<view class="xc-padding xc-bg-white xc-c-666">
						<rich-text :nodes="goods.details"></rich-text>
					</view>
						
						
					<!-- 猜你喜欢 -->
					<view class="padding text-center text-lg"><text class="ico-title-arr margin-right"></text> 猜你喜欢 <text class="ico-title-arr margin-left"></text></view>
					<view class="cu-list grid col-2 bg-white" >
						<view class="cu-item radius" @tap="navTo('/pages/mall/detail?id=' + item.goods_id)" style="padding:5px;" v-for="(item,index) in guesslike" :key="index">
							<view class="cu-avatar xl" :style="'background-image:url(/static/images/ad-00'+(item+1)+'.jpg); margin:0 auto; width: 100%; height: 375rpx;'"></view>
							<view class="text-cut margin-top-xs">{{item.title}}</view>
							<view class="text-cut margin-tb-xs text-red">￥{{item.mall_price/100}}</view>
							
						</view>
					</view>
					
					
					<!-- 购买 -->
					<view class="cu-bar bg-white tabbar xc-bottom-bar">
						<button class="action" open-type="contact">
							<view class="cuIcon-service text-gray">
							
							</view>
							客服
						</button>
						<view class="action" @tap="navTo('../cart/cart')">
							<view class="cuIcon-cart">
								<view class="cu-tag badge">9</view>
							</view>
							购物车
						</view>
						<view class="bg-green submit text-white" @tap="addToCart">加入购物车</view>
						<view class="xc-bg-green text-white submit" @tap="buy">立即订购</view>
					</view>
					
					<!-- 底部弹窗 -->
					<view class="xc-mask" :style="winBottom?'display:block':'display:none'" @tap="hideWin" @touchmove.stop.prevent="moveHandle" ></view>
					<view class="xc-window-bottom"  :class="winBottom?'active':''" >
						<view class="xc-padding">
							<view class="xc-flex">
								<view class="spec-img">
									<image :src="goods_img"></image>
								</view>
								<view class="xc-flex-1 xc-margin-l">
									当前已选：
								</view>
							</view>
							
							<view class="xc-margin-t-20" v-for="(item,key,index) in filter_spec" :key="index" >
								<view class="xc-margin-b xc-text-bold xc-c-666 xc-text-16">{{key}}</view>
								<view class="xc-flex xc-flex-wrap" >
									<button class="cu-btn xc-margin-r-10 xc-margin-b-5" :class="buy_item.spec_key[key]== subitem.item_id ?'bg-blue':'line-gray'" v-for="(subitem,subindex) in item" :key="subindex" @tap="doSpec(subitem,item, key)" >{{subitem.item}}</button>
								</view>
								
							</view>
							<view class="xc-margin-t-20 xc-flex xc-flex-row-between"  >
								<view class="xc-margin-b xc-text-bold xc-c-666 xc-text-16">数量</view>
								<view class="xc-flex xc-w-160 xc-flex-col-center" >
									<button class="cu-btn" @tap="jian" :disabled="buy_item.num == 1?true:false">-</button>
									<input class="xc-text-c xc-text-20"  v-model="buy_item.num" />
									<button class="cu-btn" @tap="jia">+</button>
									
								</view>
							</view>
							<view  class="flex flex-direction xc-margin-t-40">
								<button class="bg-green cu-btn lg" @tap="ok">确 定</button>
							</view>
						</view>
					</view>
					
					<view style="height: 2000px;"> </view>
						
					</view>
				</template>
				
				<script>
					// import config from "../../config.js"
					// import util from "../../common/util.js"
					// import GOODS from "../../api/goods.js"
					import {
						mapState,
						mapMutations
					} from 'vuex'
					// {
					// 	"path": "pages/mall/detail",
					// 	"style": {
					// 		"app-plus": {
					// 			"titleNView": {
					// 				"type": "transparent",
					// 				"backgroundColor": "#8AC53F"
					// 			}
					// 		}
					// 	}
					// }, 
					export default {
						data() {
							return {
								
								//轮播图
								swiperList:[],
								// 猜你喜欢
								guesslike:[],
								//商品
								goods:{},
								//选中图片
								goods_img:"../../static/images/470x470.jpg",
								//提交产品
								buy_item:{
									shop_id:0,
									spec_key:{},
									goods_id:0,
									num:1
								},
								//操作类型
								buy_act: 1, //1，立即购买，2加入购物车
								//规格
								filter_spec:{},
								//底部弹窗
								winBottom: false
							}
						},
						onLoad(opt) {
							
							if (opt.id){
								this.buy_item.goods_id = opt.id;
								this.getDetail(opt.id);
								
							}
						},
						methods: {
							navTo(url){
								uni.navigateTo({
									url:url
								})
							},
							//获取产品详情
							getDetail(id){
								let that = this;
								uni.showLoading({
									mask:true
								})
								let url =  config.baseUrl + "/v1/goods/detail";
								that.$api.AJAX({
								
									data:{goods_id:id},
									url:url,
									success(res){
										console.log("装备详情",res);
										that.goods = res.data.detail; //产品详情
										that.buy_item.shop_id = res.data.shop.shop_id?res.data.shop.shop_id:0;//商家ID
										that.filter_spec = res.data.filter_spec;//规格
										// 规格遍历
										for(var sp in res.data.filter_spec){
											
											//非常重要********VUE特性
											that.$set(that.buy_item.spec_key, sp , "");
										}
				
										console.log(that.buy_item.spec_key);
										//轮播图
										that.swiperList.push({photo:res.data.detail.photo});
										that.swiperList.forEach(item=>{
											if (!util.isUrl(item.photo)){
												item = config.webUrl + item.photo;
											}
										})
										uni.hideLoading();
									}
								});
							},
							//立即购买
							buy(){
								this.buy_act = 1;
								this.winBottom = true;
							},
							//加入购物车
							addToCart(){
								this.buy_act = 2;
								this.winBottom = true;
							},
							//选择选项卡
							doSpec(subitem,item,key){
								let that = this;
								that.buy_item.spec_key[key] = subitem.item_id;
								that.goods_img = subitem.src;
								// if (that.buy_item.spec_key[key] == subitem.item_id){
								// 	console.log("选中key",that.buy_item.spec_key[key]);
								// }
							
								// console.log("key:value",key);
								console.log("选中",subitem);
								console.log("项目",that.buy_item.spec_key);
											
							},
							//关闭弹窗
							hideWin(){
								this.winBottom = false;
							},
							//减
							jian(){
								if (this.buy_item.num == 1) return;
								this.buy_item.num --;
								console.log(this.buy_item.num);
								
							},
							//加
							jia(){
								this.buy_item.num ++;
								console.log(this.buy_item.num);
							},
							//提交操作
							ok(){
								let that = this;
								let post_json = {
									...that.buy_item
								}
								console.log("调整前",post_json);
								let arr = Object.values(post_json.spec_key)
								
								if (arr.findIndex(item=>{ return item==""})>-1){
									that.$api.msg('请先选择规格');
									return;
								}
								
								if (arr.length>0){
									post_json.spec_key = arr.join("_");
								}
								
								console.log("调整后",post_json);
								if (this.buy_act === 1){
									
									console.log(post_json);
									// that.hideWin();
									// uni.navigateTo({
									// 	url:'../orders/checkout'
									// })
									
									return;
									//立即购买
									GOODS.buy(post_json).then(res=>{
										console.log("立即购买",res);
										uni.navigateTo({
											url:"checkout"
										})
									})
								}else {
									
									// that.$api.msgOk("已加入购物车");
									// setTimeout(()=>{that.hideWin();},100)
									
									//加入购物车
									GOODS.addcart(post_json).then(res=>{
										console.log("加入购物车",res);
										if (res.data.error_code == 0){
											that.$api.msg("已加入购物车");
										}
									})
								}
							},
							//空滑动
							moveHandle(){
								
							}
						}
					}
				</ script>
				
				<style scope>
				.goods-swiper{ height: 750rpx;}
				.goods-swiper image{width: 750rpx; height: 750rpx;}
				.shop-bottom{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 6;}
				
				.spec-img{ width: 200rpx;  height: 200rpx; background-color: #FFF; border:1px solid #eee; border-radius: 14rpx; overflow: hidden; margin-top: -80rpx;}
				.spec-img image{ width: 200rpx; height: 200rpx;}
				.xc-window-bottom {bottom: -80rpx;}
				.xc-window-bottom.active {bottom: 0rpx;}
				
				.xc-btn-back{ position: absolute; z-index: 5; left: 20rpx; top:20rpx; background-color: rgba(0,0,0,.4); width: 60rpx; height: 60rpx; border-radius: 120rpx; display: flex;align-items: center; justify-content: center; }
				.xc-btn-back text{  color:#FFF; font-size: 34rpx;}
				</style>
				
				`
			}
		},
		onLoad(opt) {
			
			if (opt.id){
				this.buy_item.goods_id = opt.id;
				this.getDetail(opt.id);
				
			}
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url:url
				})
			},
			//获取产品详情
			getDetail(id){
				let that = this;
				uni.showLoading({
					mask:true
				})
				let url =  config.baseUrl + "/v1/goods/detail";
				that.$api.AJAX({
				
					data:{goods_id:id},
					url:url,
					success(res){
						console.log("装备详情",res);
						that.goods = res.data.detail; //产品详情
						that.buy_item.shop_id = res.data.shop.shop_id?res.data.shop.shop_id:0;//商家ID
						that.filter_spec = res.data.filter_spec;//规格
						// 规格遍历
						for(var sp in res.data.filter_spec){
							
							//非常重要********VUE特性
							that.$set(that.buy_item.spec_key, sp , "");
						}

						console.log(that.buy_item.spec_key);
						//轮播图
						that.swiperList.push({photo:res.data.detail.photo});
						that.swiperList.forEach(item=>{
							if (!util.isUrl(item.photo)){
								item = config.webUrl + item.photo;
							}
						})
						uni.hideLoading();
					}
				});
			},
			//立即购买
			buy(){
				this.buy_act = 1;
				this.winBottom = true;
			},
			//加入购物车
			addToCart(){
				this.buy_act = 2;
				this.winBottom = true;
			},
			//选择选项卡
			doSpec(subitem,item,key){
				let that = this;
				that.buy_item.spec_key[key] = subitem.item_id;
				that.goods_img = subitem.src;
				// if (that.buy_item.spec_key[key] == subitem.item_id){
				// 	console.log("选中key",that.buy_item.spec_key[key]);
				// }
			
				// console.log("key:value",key);
				console.log("选中",subitem);
				console.log("项目",that.buy_item.spec_key);
							
			},
			//关闭弹窗
			hideWin(){
				this.winBottom = false;
			},
			//减
			jian(){
				if (this.buy_item.num == 1) return;
				this.buy_item.num --;
				console.log(this.buy_item.num);
				
			},
			//加
			jia(){
				this.buy_item.num ++;
				console.log(this.buy_item.num);
			},
			//提交操作
			ok(){
				let that = this;
				let post_json = {
					...that.buy_item
				}
				console.log("调整前",post_json);
				let arr = Object.values(post_json.spec_key)
				
				if (arr.findIndex(item=>{ return item==""})>-1){
					that.$api.msg('请先选择规格');
					return;
				}
				
				if (arr.length>0){
					post_json.spec_key = arr.join("_");
				}
				
				console.log("调整后",post_json);
				if (this.buy_act === 1){
					
					console.log(post_json);
					// that.hideWin();
					// uni.navigateTo({
					// 	url:'../orders/checkout'
					// })
					
					return;
					//立即购买
					GOODS.buy(post_json).then(res=>{
						console.log("立即购买",res);
						uni.navigateTo({
							url:"checkout"
						})
					})
				}else {
					
					// that.$api.msgOk("已加入购物车");
					// setTimeout(()=>{that.hideWin();},100)
					
					//加入购物车
					GOODS.addcart(post_json).then(res=>{
						console.log("加入购物车",res);
						if (res.data.error_code == 0){
							that.$api.msg("已加入购物车");
						}
					})
				}
			},
			//空滑动
			moveHandle(){
				
			}
		}
	}
</script>

<style scope>
.goods-swiper{ height: 750rpx;}
.goods-swiper image{width: 750rpx; height: 750rpx;}
.shop-bottom{ position: fixed; bottom: 0; left: 0; width: 100%; z-index: 6;}

.spec-img{ width: 200rpx;  height: 200rpx; background-color: #FFF; border:1px solid #eee; border-radius: 14rpx; overflow: hidden; margin-top: -80rpx;}
.spec-img image{ width: 200rpx; height: 200rpx;}
.xc-window-bottom {bottom: -80rpx;}
.xc-window-bottom.active {bottom: 0rpx;}

.xc-btn-back{ position: absolute; z-index: 5; left: 20rpx; top:20rpx; background-color: rgba(0,0,0,.4); width: 60rpx; height: 60rpx; border-radius: 120rpx; display: flex;align-items: center; justify-content: center; }
.xc-btn-back text{  color:#FFF; font-size: 34rpx;}
</style>
